<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <style>
        .container{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            flex-direction: column;
            text-align: center;
            /* margin-bottom: 30px; */
        }
        .progress-bar{
            display: flex;
            margin-bottom: 20px;
            justify-content: space-between;
            max-width: 100%;
            width: 350px;  
            position: relative;
        }
        .progress-bar::before{
            content: '';
            position: absolute;
            background-color: #e0e0e0;
            top: 50%;
            left: 0;
            transform:translateY(-50%);
            height: 5px;
            width: 100%;
            z-index: -1;
        }
        .progress{
            background-color: #3498db;
            position: absolute;
            top: 50%;
            left: 0;
            transform:translateY(-50%);
            height: 5px;
            width: 0%;
            z-index: -1;
            transition: 0.4s ease;
        }
        .circle{
            background-color: #FFF;
            color: #999;
            border-radius: 50%;
            height: 50px;
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid #e0e0e0;
            transition: 0.4s ease;
        }
        .circle.active{
            border-color: #3498db; 
        }
        .btn{
            padding: 5px 10px;
            margin-right: 10px;
            background-color: #3498db;
            border: none;
            color: #fff;
        }
        .btn:disabled{
            background-color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="progress-bar" >
            <div class="progress" id="progress"></div>
            <div class="circle active">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
        </div>
        <div>
            <button class="btn" disabled id="prev">上一步</button>
            <button class="btn" id="next">下一步</button>
        </div>
    </div>
    <script>
        const progress = document.getElementById('progress');
        const prev = document.getElementById('prev');
        const next =document.getElementById('next');
        const circles = document.querySelectorAll('.circle')
        let currentActive =1;
        // 下一步
        next.addEventListener('click',()=>{
            currentActive++;
            if(currentActive >circles.length){
                currentActive=circles.length;
            }
            update()
        })
        // 上一步
        prev.addEventListener('click',()=>{
            currentActive--;
            if(currentActive<1){
                currentActive=1;
            }
            // 
            update()
        })
        // 更新
        function update(){
            circles.forEach((circle,index)=>{
                if(currentActive >index){
                    circle.classList.add('active')
                }else{
                    circle.classList.remove('active')
                }
            })
            const actives =document.querySelectorAll('.active')
            progress.style.width =(actives.length-1)/(circles.length-1) * 100 + '%';
            if(currentActive ===1){
                prev.disabled =true
            }else if(currentActive ===circles.length){
                next.disabled =true
            }else{
                prev.disabled=false;
                next.disabled=false;
            }
        }
    </script>
</body>
</html>